<template>
    <div>
        <el-aside id="asideNav">
            <div class="logo-name">
                <img src="../../../assets/img/logo2.png" width="100px">
                <img src="../../../assets/img/logofont.png" width="100px">
            </div>
            <el-menu :unique-opened="true"
                     background-color="#303133"
                     text-color="#fff"
                     active-text-color="#ffd04b"
                     :default-active="activeIndex"
                     router
            >
                <menuTree :menuData="menuData"></menuTree>
            </el-menu>
        </el-aside>
    </div>
</template>

<script>
    import menuTree from "./menuTree"
    import routes from '../../../router'

    export default {
        name: "asideNav",
        components: {
            menuTree
        },
        data() {
            return {
                //菜单
                menuData: [],
                activeIndex: 'aa',
            }
        },
        created() { // $(function(){ //页面加载完毕后执行该函数。 })
            this.initMenu();
        },
        watch: {
            /*监听路径的变化*/
            "$route.path": 'selectmenu'
        },
        methods: {
            //查找对应的路径地址
            selectmenu(key, indexpath) {
            //    alert(key);
                let name = "";
                //递归
                let navTitle = function (path, routerARR) {
                      // alert(JSON.stringify(routerARR));
                    for (let i = 0; i < routerARR.length; i++) {

                        //如果子菜单的路由个数大于0（存在子）或者当是前路径，就执行
                        if (routerARR[i].children.length > 0 || routerARR[i].path === path) {
                            
                            //为当前路径，不存在子
                            if (routerARR[i].path === path && routerARR[i].children.length < 1) {

                                //将当前的路径赋值给name
                                name = routerARR[i].name;
                                break
                            }
                            //递归调用方法，给路径赋值
                            navTitle(path, routerARR[i].children)
                        }
                    }
                    return name
                }
                //dispatch含有异步操作，，作用为传值给vuex的mutation改变state
                this.$store.dispatch("addTab", {
                    title: navTitle(key, routes.options.routes),
                    path: key
                })
            },

            //初始化侧边导航栏，，获取所有的菜单
            initMenu() {
                const that = this;
                const userId = sessionStorage.getItem("userId");
                this.$http.get("/menu/queryTreeDataByUserId?userId="+userId).then(function (resp) {
                    //console.log(JSON.stringify(resp));
                     //  console.log(resp);
                    that.menuData = resp.data.data;
                    // for (let index = 0; index < that.menuData.length; index++) {
                    //     const element =  that.menuData[index];
                       
                    //     if(element.children!=null){
                    //          console.log(element.children.length);
                    //      console.log("....."+JSON.stringify(element.children)+".....");
                    //      }
                    // }
                });
            },
        }
    }
</script>

<style lang="scss">
    $top: top;
    $bottom: bottom;
    $left: left;
    $right: right;
    %w100 {
        width: 100%;
    }

    %h100 {
        height: 100%;
    }

    %cursor {
        cursor: pointer;
    }

    @mixin set-value($side, $value) {
        @each $prop in $leftright {
            #{$side}-#{$prop}: $value;
        }
    }

    #asideNav {
        width: auto !important;
        display: flex;
        flex-direction: column;
        border-right: solid 1px #e6e6e6;

        .logo-name {
            background-color: #fbfbfb !important;

            width: 300px;
            font-weight: 400;
            z-index: 999;

            p {
                margin-right: 60px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 26px;
                color: #384f56;
            }
        }

        .el-menu-vertical:not(.el-menu--collapse) {
            width: 200px;
            @extend %h100;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .el-menu {
            flex: 1;
            overflow: inherit;
            border-right: none;

            &::-webkit-scrollbar {
                display: none;
            }

            .fa {
                vertical-align: middle;
                margin-right: 5px;
                width: 24px;
                text-align: center;
                font-size: 18px;
            }

            .el-menu-item {
                background-color: #5e5f54d5 !important;
                border-bottom: 1px solid #698eba;

                &:hover {
                    color: #ffffff !important;
                    background-color: #0f5823 !important;
                }
            }

            .el-menu-item.is-active {
                background-color: #60a1e6 !important
            }

            .is-opened > .el-submenu__title > .el-icon-arrow-down {
                color: #ffffff;
                font-weight: 500;
                font-size: 18px;
            }
        }

    }
</style>
